Monaco

Monaco 是通过 VS Code 源码编译出来的

Monaco 的使用

需要的 npm 包：

1. 主包: monaco-editor VS Code 导出的包。类似于 VS Code 编辑器中的编辑器部分，但是实际上 Monaco 几乎包含整个 VS Code 功能，比如命令中心，Status Bar 等。
2. Webpack 插件: monaco-editor-webpack-plugin。用于将 Monaco Editor 编辑器打包到 Webpack 应用程序中的插件。它可以将 Monaco Editor 的所有依赖项和代码打包成一个单独的文件。

API

monaco.editor.defineTheme();

monaco.editor.create(document.getElementById("container"), {
  value: "function hello() {\n\talert('Hello world!');\n}",
  language: "javascript",
  inlineSuggest: {
    enabled: true,
  },
});

class InlineCompleter {
  async provideInlineCompletions() {
    await new Promise((resolve) => setTimeout(resolve, 100));
    return { items: [{ insertText: "hellooooooo!" }] };
  }
  freeInlineCompletions() {}
}
monaco.languages.registerInlineCompletionsProvider(
  "javascript",
  new InlineCompleter()
);

Monaco 与 VS Code 扩展有什么区别？

Monaco 的 API 与 VS Code 编辑器 API 有所区别，并不是完全一样的。例如 vscode.command, vscode.Range 等类的属性，但是大体的功能是能完整对应上的。

1. 接口差异

2. 操作 DOM

VS Code 中的编辑器 API 无法直接操作 DOM，而 Monaco 可以直接操作 DOM。对于 Monaco 包来说，操作 DOM 绘制自定义 UI 是很平常的事件，我们在老版数据开发中使用了很多自定义的 UI, 比如我们在编辑器中写了 sql 代码 select * from table_name; 鼠标 hover 到一张表明上，可以弹出一个 tooltip/Dialog (React 组件绘制) 显示表的 schema 信息，这个 tooltip 就是通过操作 DOM 实现的。但是在 VS Code Extension 中，是无法做到这样的。 Extension 与底座的 DOM 天生隔离，我们只能够使用其他的交互来透出表信息，比如底座展开一张 Webview，显示表字段信息，是否有权限等。

3. 体积

4. Copilot 集成

1. Monaco 那边需要自行绘制 UI 实习，而 VS Code 扩展是需要在扩展中引入对象相关的 popsod.d.ts 声明即可。

LSP 与 Monaco 的统一

CodinGame/monaco-vscode-api